<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mapp</title>
<link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet"
	href="jquery-mobile-theme/themes/apptheme.min.css" />
<link rel="stylesheet"
	href="jquery-mobile-theme/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

<script type="text/javascript">
$( document ).on( "pageinit", "#map-page", function() {
	
    var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support
    if ( navigator.geolocation ) {
        function success(pos) {
            // Location found, show map with these coordinates
            drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        }
        function fail(error) {
            drawMap(defaultLatLng);  // Failed to find location, show default map
        }
        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 15000});
    } else {
        drawMap(defaultLatLng);  // No geolocation support, show default map
    }
    function drawMap(latlng) {
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        
        $.ajax({
		      url: "getAllEntityJsonMobile",
		      type: "POST",
// 		      data: {idBanca: _idBanca, citta : _citta, via : _via, provincia : _provincia, cap : _cap, distanza : _distanza },
		      dataType: "json",  
		      error: function(){  
		    	  
		      },
		      success: function(data){   
		    	  setTimeout(function() {
		    	  //alert(data.idBanca);
		    	  var listaEntity = data.mapEntity;
		    	  for (var i in listaEntity) {
						(function() {
		    		   	var entity = listaEntity[i];
						console.log("destinationA " + entity.address +"," +entity.cityName);
						var service = new google.maps.DistanceMatrixService();
			    		   service.getDistanceMatrix(
			    		     {
			    		       origins: [entity.address +"," +entity.cityName],
			    		       destinations: [latlng],
			    		       travelMode: google.maps.TravelMode.DRIVING,
			    		       avoidHighways: false,
			    		       avoidTolls: false
			    		     }, callback);

			    		   function callback(response, status) {
// 				    	TODO: diminuire distanza
			    			   	if(response.rows[0].elements[0].distance.value<=(2000)) {
			    			   		var geocoder = new google.maps.Geocoder();
									geocoder.geocode({ 'address': entity.address +"," +entity.cityName}, function(results, status) {
									      if (status == google.maps.GeocoderStatus.OK) {
									    	  	var marker = new google.maps.Marker({
									            position: results[0].geometry.location,
									            map : map,
// 									            draggable:true,
									            animation: google.maps.Animation.DROP,
									            });
									            var content = '<div class="gm-iw gm-sm" style="width: 204px;"><div class="gm-title">'+entity.name+'</div><div class="gm-basicinfo" ><div class="gm-addr">'+entity.address+'</div><div class="gm-website" >';
								    			if(entity.premium) {
													if(entity.entityType==0) {
														image= 'images/icon/arch.png';
														href='detailMobileAttraction?idAttraction='+entity.entityId;
													}		
													else {
														image= 'images/icon/restaurant.png';
														href='detailMobileRestaurant?idRestaurant='+entity.entityId;
													}		
									    			content +='<a data-ajax="false" href="'+href+'">Dettaglio</a></div></div></div>';
								    			}
								    			
								    			var markerA = new google.maps.Marker({
										            position: results[0].geometry.location,
										            map : map,
										            animation: google.maps.Animation.DROP,
										            icon: image
										        });
									    	  	var infowindow = new google.maps.InfoWindow({
									    	  	      content: content
									    	  	});
									    	  	google.maps.event.addListener(markerA, 'click', function() {
									    	  	    infowindow.open(map,markerA);
									    	  	});
									    	  			

									      }
									});						
			    			   	}
		    			   
		    		   }

						})();									   
		    	 }
		      }, 1000);
		      }  
		  });
        
        
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });
    }
});
</script>
<style type="text/css">
#logo {
	background: url(images/logo.png) no-repeat;
}
#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }
</style>
</head>
<body>

	<div data-role="page" id="map-page" data-url="map-page">
    	<div data-role="header" style="overflow: hidden;" data-position="fixed">
			<h1 class="h1-logo">
				<img src="images/logo1.jpg" width="113px" height="40px" />
				<tiles:insertAttribute name="headTitle" ignore="true" />
			</h1>
			<a href="homeMobile.action"
				data-ajax="false" class="custom-btn ui-btn-left ui-corner-none ui-btn ui-icon-home ui-btn-icon-notext"></a>
<!-- 			<a href="#" -->
<!-- 				class="ui-btn-right ui-corner-none ui-btn ui-icon-navigation ui-btn-icon-notext"></a> -->

		</div>
    <div role="main" class="ui-content" id="map-canvas">
        <!-- map loads here... -->
    </div>
 
</div>
</body>
</html>
